<template>
  <el-dialog
    v-model="visible"
    :title="$t('user.updateUserScore')"
    class="component-update-user-score"
    width="30%"
  >
    <!-- native modifier has been removed, please confirm whether the function has been affected  -->
    <el-form
      ref="dataFormRef"
      :model="dataForm"
      :rules="dataRule"
      :label-width="$t('language') === 'language' ? '210px' : '120px'"
      @submit.prevent
    >
      <el-form-item
        :label="$t('user.scoresChange')"
        prop="scoreValue"
      >
        <el-input-number
          v-model="dataForm.scoreValue"
          class="scores-change"
          :controls="false"
          step-strictly
          @change="onInputNumber"
        />
        <span>{{ $t('user.scoreTip1') }}</span>
      </el-form-item>

      <el-form-item
        label="备注"
        prop="remark"
      >
        <el-input
          v-model="dataForm.remark"
          type="textarea"
          maxlength="100"
          show-word-limit
        />
      </el-form-item>

      <!-- <el-form-item label="备注" prop="remark">
        <el-input v-model="dataForm.remark" type="number"></el-input>
        <span>正数代表增加，负数代表减少，只能输入整数</span>
      </el-form-item>-->
      <el-form-item>
        <div
          class="default-btn"
          @click="visible = false"
        >
          {{ $t('remindPop.cancel') }}
        </div>
        <div
          class="default-btn primary-btn"
          @click="onConfirm"
        >
          {{ $t('remindPop.confirm') }}
        </div>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script setup>
import { ElMessage } from 'element-plus'

const emit = defineEmits(['refreshDataList'])

const validateNumber = (rule, value, callback) => {
  if (!/^(-)?[1-9]+[0-9]*$/.test(value)) {
    callback(new Error($t('user.growthTip3')))
  } else {
    callback()
  }
}
const visible = ref(false)
const dataForm = reactive({
  scoreValue: null,
  userIds: [],
  remark: null
})
const dataRule = {
  scoreValue: [
    { required: true, message: $t('user.scoreTip2'), trigger: 'blur' },
    { validator: validateNumber, trigger: 'blur' }
  ],
  remark: [
    { required: true, message: '备注不能为空', trigger: 'blur' }
  ]
}

const init = (ids) => {
  visible.value = true
  dataForm.userIds = ids
  dataForm.scoreValue = null
  dataForm.remark = null
}
const onInputNumber = () => {
  if (dataForm.scoreValue >= 100000000) {
    dataForm.scoreValue = 100000000
  } else if (dataForm.scoreValue <= -100000000) {
    dataForm.scoreValue = -100000000
  }
}

const dataFormRef = ref(null)
const onConfirm = Debounce(() => {
  dataFormRef.value?.validate((valid) => {
    if (!valid) {
      return
    }
    if (!dataForm.userIds) {
      return
    }
    const param = dataForm
    http({
      url: http.adornUrl('/user/userLevel/updateScore'),
      method: 'put',
      data: http.adornData(param)
    }).then(({ data }) => {
      ElMessage({
        message: $t('remindPop.success'),
        type: 'success',
        duration: 1500,
        onClose: () => {
          visible.value = false
          emit('refreshDataList', data.page)
          dataForm.scoreValue = null
        }
      })
    }).catch((e) => {
    })
  })
}, 1000)

defineExpose({ init })
</script>

<style lang="scss" scoped>
.component-update-user-score {
  .scores-change{
    width: 100%;
    display: block;
    :deep(.el-input input){
      text-align: left;
    }
  }
}
</style>
